<template>
   <div class="chartsDate">
      <div class="chartsTitle">
          <span>发表日期</span>
      </div>
      <div class="chartsContent">
        <div id="main" style="width: 158px;height:60px;"></div>          
      </div>
      <div class="chartsYear">
          <span>1988年</span>
          <span>2017年</span>
      </div>
      <div class="chartsInput">
          <input type="text" maxlength="4" v-model="startYear" @keyup="startYearUp">年
          <span>～</span>
          <input type="text" maxlength="4" v-model="overYear" @keyup="overYearUp">年          
      </div>
      <p>未标注日期(1000)</p>
      <dateError v-if="dateErrorShow" @dateErrorS="dateErrorS"></dateError>
   </div>
</template>

<script>
import echarts from 'echarts'
// 日期弹出框
import dateError from '@/components/public/dateError'

export default {
  data() {
    return {
      startYear: '',
      overYear:  '',
      dateErrorShow: false
    }
  },
  mounted () {
    // 引入基本模板
    let echarts = require('echarts/lib/echarts')
    require('echarts/lib/chart/pie')
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/legend')

     var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {},
            xAxis: {
                show: false,                
                data: ['1','2','3','4','5','6','7']
            },
            yAxis: {
                show: false
            },
            series: [{
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                connectNulls: true,
                smooth: true,
                lineStyle: {
                  normal: {
                    color: '#307183'                      
                  }
                },
                data: [10,50,10,90,40,62,70]
            }]
        };
        myChart.setOption(option);
  },
  methods: {
    overYearUp: function () {
      if (this.overYear.length < 5 ) {
          if (/^[0-9]*$/.test(this.overYear)) {
          } else {
              this.overYear = ''          
          }
      }
      this.yearUpInit(this.overYear)
    },
    startYearUp: function () {
      if (this.startYear.length < 5 ) {
          if (/^[0-9]*$/.test(this.startYear)) {
          } else {
              this.startYear = ''          
          }
      }
      this.yearUpInit(this.startYear)        
    },
    yearUpInit: function () {
      var s = parseInt(this.startYear)
      var b = parseInt(this.overYear)
      if (this.overYear.length === 4) {
        if (this.startYear === '') {
        } else if (s > b) {
           this.dateErrorShow = true
        }
      }
    },
    dateErrorS: function () {
      this.dateErrorShow = false
      this.startYear = ''
      this.overYear = ''
    }
  },
  components: {
    'dateError': dateError
  }
}
</script>

<style>
   @import '../../../static/charts/charts.css'
</style>
